<template>
  <div>
      <h1>生成柱状图</h1>
      <!-- 柱状图 准备的dom -->
      <div ref="barChart" id="barChart" style="width: 600px;height:400px">

      </div>
  </div>
</template>
<script>
import { Tooltip } from 'element-ui'

export default {
  mounted(){
     this.makeBarCharts()//生成图表方法
  },
  methods:{
    // echarts 常用配置项
    // 1.title 图表标题修改
    // 2.lenged 图例展示 
    // 3.grid 图表网格设置 调整图表占整体区域的大小
    // 4.tooltip 鼠标悬浮提示
    // 5.xAxis 横坐标的数据
    // 6.yAxis 纵坐标的数据
    // 7.series 柱状图的数据加载
    // 8.每个大的属性内都有itemStyle 自定义大配置的样式
    
 
    makeBarCharts(){ //生成柱状图的方法
        // 1 初始化echarts的操作实例对象
        let mycharts=this.$echarts.init(document.getElementById("barChart"))
        // 2 准备好图标配置项
        let option = {
           title:{  //图标标题的细节修改
              text:'全国出生人口',
              subtext:"2025统计",
              textStyle:{
                color:"#ff00ff"
              }
           },
           legend:{ //图例展示
             top:30,
             right:50
           },
           grid:{ //图表的网格设置 调整图表占整体区域的大小
            // 网格线的颜色等
            // left:250,
            right:200,
            bootom:5,
             show:true,
             borderColor:"#ff0000"
           },
           tooltip:{ //自定义鼠标悬浮提示
            // 用formatter 来自定义提示的样式
            // {a}图例{b}x轴 c 代表值
            formatter: '{a}年-+-{b}<br>{c}',
            triggerOn:"mousemove" //mousemove鼠标移动时触发或click点击触发
           }, //鼠标滑过图表时显示的提示框
           xAxis:{
            type: 'category',
            data:["北京","上海","广州","深圳","杭州","成都"]//柱状图的横坐标的数据
           },
           yAxis:{
             type:"value" //值默认加载value
           },
           series:[{ //柱状图的数据加载
                  name:"2024",
                  data:[{name:"北京",value:60},
                  {name:"上海",value:60,cnt:222},
                  {name:"广州",value:100},
                  {name:"深圳",value:60},
                  {name:"杭州",value:80},
                  {
                    // 自定义成都的单个柱子样式
                  name:"成都",
                    value:160,
                    itemStyle:{color:"#ff0000"}
                  }
                ],//柱状图的数据
                  type:"bar"
           },
          { //柱状图的数据加载
               name:"2025",
                data:[{name:"北京",value:160},
                {name:"上海",value:60},
                {name:"广州",value:100},
                {name:"深圳",value:260},
                {name:"杭州",value:80},
                {
                  // 自定义成都的单个柱子样式
                name:"成都",
                  value:60,
                  itemStyle:{color:"#ff0000"}
                }
              ],//柱状图的数据
                type:"bar"
           }]
        
        }
      // 3, 将准备好的图标配置项设置给echarts实例对象setOption
      mycharts.setOption(option)
    }
  }
}
</script>